<template>
  <div
    class="articleList"
    ref="artList"
  >
    <van-pull-refresh
      v-model="pullLoading"
      @refresh="onRefresh"
    >
      <!-- 这里放的是van-list -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="
                    $router.push({
                      path: '/article',
                      query: { id: item.art_id },
                    })
                  "
        >
          <template #label>
            <!-- 图片区域 -->
            <van-grid
              :border="false"
              :column-num="item.cover.type"
            >
              <van-grid-item
                v-for="(val, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="val" />
              </van-grid-item>
            </van-grid>

            <!-- 作者信息区域 -->
            <div class="info">
              <span>{{ item.aut_name }}</span>
              <span style="margin: 0 10px">评论{{ item.comm_count }}</span>
              <span>{{ item.pubdate | relvTime }}</span>

              <van-icon
                name="cross"
                style="float: right"
              />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from "@/api";

export default {
  name: "articleList",
  data() {
    return {
      list: [], // 频道详情
      loading: false, // 首屏还在加载
      finished: false, // 完成加载

      timestamp: Date.now(), // 查看上一屏文章 的时间戳

      pullLoading: false, //标记下拉是否加载
      scrollTop: 0 // 滚动条距离
    };
  },
  // 接收参数
  props: {
    channel_id: {
      // 必传
      required: true,
    },
  },
  methods: {
    // 下拉刷新
    async onRefresh() {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 下拉刷新肯定是查最新数据，所以传入当前时间戳
        timestamp: Date.now(),
      });
      console.log("res:", res);
      this.list = res.data.data.results;
      // 把下一段的时间戳赋值一下，方便用户做上拉列表刷新
      this.timestamp = res.data.data.pre_timestamp;
      // pullLoading：是用来标记当前是否正在加载，所以如果我们加载完成，要记得把它改成false
      this.pullLoading = false;
    },
    // 页面加载时的文章列表
    async onLoad() {
      const res = await articleListAPI({
        channel_id: this.channel_id, // 频道id
        timestamp: this.timestamp, // 时间戳
      });
      // console.log("res:", res);
      this.list.push(...res.data.data.results); // 方便保存之前新闻数据

      this.timestamp = res.data.data.pre_timestamp; // 赋值前一个时间戳
      this.loading = false;
      // 代表全部加载完毕
      if (this.timestamp === null) {
        this.finished = true;
      }
    },

  },
  mounted() {
    this.$refs.artList.onscroll = () => {
      // console.log(' this.scrollTop = this.$refs.artList.scrollTop;:', this.$refs.artList.scrollTop);
      this.scrollTop = this.$refs.artList.scrollTop
    }
  },
  activated() {
    this.$refs.artList.scrollTop = this.scrollTop
  }
};
</script>

<style lang='less'>
.articleList {
  position: fixed;
  width: 100%;
  // left: 0;
  top: 90px; // 是nav-bar高度是46，tabs是44，加起来90
  bottom: 50px; // 这是tabbar的高度
  overflow: scroll;
  .van-cell__title span {
    font-size: 17px;
  }

  .info {
    font-size: 16px;
  }
}
</style>